<template>
  <div class="Dbox">
    <van-nav-bar title="新建档案" left-text="" left-arrow @click-left="onClickLeft" />
    <van-notice-bar wrapable :scrollable="false" text="根据国家有关规定，就诊人在未实名认证状态下，平台将无法提供诊断、药品、挂号等服务，请及时实名认证!" class="gen" />
    <h3 class="jbxx">基本信息</h3>
    <div class="x-box">
      <div class="yu">
        <p>与您的关系</p>
        <!-- <button>本人</button>
        <button>配偶</button>
        <button>父母</button>
        <button>子女</button>
        <button>亲戚</button>
        <button>朋友</button> -->
        <button v-for="(item, ind) in gx" :key="ind" @click="btn(item)"
          :class="activeIndex === item.id ? 'guanxi' : ''">
          {{ item.name }}
        </button>
      </div>
      <div class="x-b">
        <van-cell-group inset>
          <van-field v-model="newDang.name" required label="姓名" placeholder="请输入真实姓名" />
        </van-cell-group>
      </div>
      <div class="x-b">
        <van-cell-group inset>
          <van-field v-model="newDang.card" required label="身份证号" placeholder="请输入身份证号码" />
        </van-cell-group>
      </div>
      <div class="x-b">
        <van-cell-group inset>
          <van-field v-model="newDang.date" @click="showPopup" required label="出生日期" placeholder="请选择日期">
          </van-field>
        </van-cell-group>
      </div>
      <van-popup v-model:show="show" position="bottom" :style="{ padding: '64px' }">
        <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate"
          @confirm="handleClick" @cancel="handleNone" />
      </van-popup>
      <div class="x-b">
        <van-cell-group inset>
          <van-field v-model="sex" required label="性别">
            <template #input>
              <div class="sexBtn">
                <div v-for="(item, ind) in sexs" :key="ind" :class="sexIndex === item.id ? 'sexIndex' : ''"
                  @click="handleSex(item)">
                  {{ item.name }}
                </div>
              </div>
            </template>
          </van-field>
        </van-cell-group>
      </div>
      <div class="x-b">
        <van-cell-group inset>
          <van-field v-model="newDang.tel" required label="联系方式" placeholder="请输入联系方式" />
        </van-cell-group>
      </div>
    </div>
    <button class="bc" @click="getAdd">保存</button>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { showToast } from 'vant'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const gx = ref([
  {
    id: 1,
    name: '本人',
  },
  {
    id: 2,
    name: '配偶',
  },
  {
    id: 3,
    name: '父母',
  },
  {
    id: 4,
    name: '子女',
  },
  {
    id: 5,
    name: '亲戚',
  },
  {
    id: 6,
    name: '朋友',
  },
])
const sexs = ref([
  {
    id: 1,
    name: '男',
  },
  {
    id: 2,
    name: '女',
  },
])
let ws = null
const minDate = new Date(1999, 1, 1)
const maxDate = new Date(2025, 5, 1)
const currentDate = ref([])
let message = ref<any>([])
const show = ref(false)
const activeIndex = ref(null)
// 关系
const sexIndex = ref(null)
let times = ref('')

const newDang = ref<any>({
  relationship: '',
  name: '',
  card: '',
  age: '',
  date: '',
  sex: '',
  tel: '',
})

const showPopup = () => {
  show.value = true
}
const handleNone = () => {
  show.value = false
}

const handleSex = (item: any) => {
  sexIndex.value = item.id
  console.log(item.name)
  newDang.value.sex = item.name
}
const handleClick = (selectedValues: any) => {
  console.log(selectedValues.selectedValues)
  show.value = false
  newDang.value.date = selectedValues.selectedValues.join('-')
}

function getTime() {
  const dates = new Date()
  const Years = dates.getFullYear()
  const Month = dates.getMonth() + 1
  const day = dates.getDate() - 1
  console.log(Years, Month, day)
  times.value = `${Years}`
  newDang.value.age = parseInt(times.value) - parseInt(newDang.value.card.substring(6, 10))
}

const btn = (item: any) => {
  console.log(item.name)
  console.log(item.id)
  activeIndex.value = item.id
  localStorage.setItem('gx', item.name)
  console.log(activeIndex.value)
  newDang.value.relationship = item.name
}
// 身份证号
// 出生日期

console.log(newDang.value)

const getAdd = async () => {
  getTime()
  console.log(newDang.value.age)
  await axios
    .post('/api/Addarchive', newDang.value)
    .then((res) => {
      console.log(res)
    })
    .catch((error) => {
      console.log(error)
    })
  newDang.value = {
    relationship: '',
    name: '',
    card: '',
    age: '',
    date: '',
    sex: '',
    tel: '',
  }
  showToast('保存成功')
  // router.back();
}

const onClickLeft = () => {
  console.log(message.value)
  router.back();
  sessionStorage.setItem('type', '3')
}
onMounted(() => { })
</script>
<style scoped>
.Dbox {
  position: relative;
}

.gen {
  width: 94%;
  margin-left: 3%;
  border-radius: 10px;
  background-color: #ffefe3;
  color: #ff5b08;
}

.jbxx {
  margin-left: 50px;
  margin-top: 40px;
}

.x-box {
  width: 100%;
  height: 800px;
  background-color: #f5f5f5;
  position: absolute;
  top: 380px;
}

.yu {
  width: 92%;
  height: 150px;
  /* position: absolute; */
  background-color: #fff;
  border-radius: 10px;
  margin-left: 4%;
}

.yu>p {
  font-size: 30px;
  margin: 20px;
}

.yu>button {
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 50%;
  background-color: #d0d0d0;
  color: #fff;
  margin-left: 27px;

  &.guanxi {
    color: white;
    background-color: #a5c7f3;
  }
}

.x-b {
  margin-top: 20px;
}

.nn {
  margin-left: 220px;
}

.nn>button {
  width: 80px;
  height: 50px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-left: 20px;
}

.bc {
  width: 90%;
  height: 80px;
  background-color: #0070ff;
  color: #fff;
  border: none;
  border-radius: 10px;
  margin-left: 5%;
  position: fixed;
  bottom: 30px;
}

.place {
  margin-left: 250px;
  border: none;
  background-color: #fff;
  font-size: 30px;
}

.sexBtn {
  display: flex;
  margin: 0 auto;
  align-items: center;

  >div {
    background-color: #dddddd;
    padding: 10px 20px;
    border-radius: 50%;
    margin: 0 25px;

    &.sexIndex {
      color: black;
      background-color: #a5c7f3;
    }
  }
}
</style>
